import React, {useState, useEffect} from 'react';
import {connect} from 'react-redux';
import {setRoomInfoAction} from "@/store/action";
import Tabbar from "@/components/tabbar";
import './index.scss'

function Mail(props) {

  const initUserData = [
    [
      {userId: 0, username: 'a', avatar: 'a'},
      {userId: 1, username: 'A_机器人', avatar: 'A_机'},
    ],
    [
      {userId: 2, username: 'b', avatar: 'b'},
      {userId: 3, username: 'biter', avatar: 'biter'},
    ],
    [
      {userId: 4, username: 'c', avatar: 'c'},
      {userId: 5, username: 'compter', avatar: 'com'},
    ],
    [
      {userId: 6, username: 'd', avatar: 'd'},
      {userId: 7, username: 'dddddd', avatar: 'ddd'},
    ],
    [
      {userId: 8, username: 'e', avatar: 'e'},
      {userId: 9, username: 'ether', avatar: 'eth'},
      {userId: 10, username: 'ether11111', avatar: 'eth'},
      {userId: 11, username: 'ether22222', avatar: 'eth'},
      {userId: 12, username: 'ether22222', avatar: 'eth'},
      {userId: 13, username: 'ether22222', avatar: 'eth'},
      {userId: 14, username: 'ether22222', avatar: 'eth'},
      {userId: 15, username: 'ether22222', avatar: 'eth'},
      {userId: 16, username: 'ether22222', avatar: 'eth'},
      {userId: 17, username: 'ether22222', avatar: 'eth'},
      {userId: 18, username: 'ether22222', avatar: 'eth'},
      {userId: 19, username: 'ether22222', avatar: 'eth'},
    ],
  ];

  let [userData] = useState(initUserData);
  let [userArr, setUserArr] = useState([]);
  let [pointArr, setPointArr] = useState([]);

  useEffect(() => {
    let points = [], users = [];
    //遍历
    for (let i = 0; i < userData.length; i++) {
      //得到每个首字母对应的用户
      let user = userData[i];
      //map遍历生成用户信息
      const userItem = user.map((item) =>
        <div className='mail-item' key={item.userId} id={user[0].username}
             onClick={chatTo.bind(this, item)}>
          <img src={item.avatar} className='' alt=''/>
          <span className=''>{item.username}</span>
        </div>
      );
      //将用户信息放入用户列表
      users.push(userItem);

      //生成首字母信息
      const pointItem = <div
        onClick={() => scrollToAnchor(user[0].username)}
        className='point-item'
        key={user[0].username}
      >
        {user[0].username}
      </div>;
      //将首字母信息放入首字母列表
      points.push(pointItem);
    }
    setUserArr(users);
    setPointArr(points);

  }, []);

  const scrollToAnchor = (e) => {
    // 找到锚点
    let anchorElement = document.getElementById(e);
    // 如果对应id的锚点存在，就跳转到锚点
    anchorElement.scrollIntoView();
  };

  // 跟联系人聊天
  const chatTo = (data) => {
    const {userInfo, roomInfo} = props;
    // 房间信息
    const room = {
      roomId: `room-${userInfo.userId}-${data.userId}`,
      mine: userInfo,
      contacts: data,
      chattingMsg: []
    }
    // 不存在聊天房间，再创建
    if(!roomInfo[room.roomId]){
      props.setRoomInfo(room);
    }

    props.history.push(`/chatting/${room.roomId}`);
  }

  return (
    <div className='mail-container'>
      <div className="discover-wrap">
        <p className="discover-item">
          {/*<img src="https://zos.alipayobjects.com/rmsportal/UmbJMbWOejVOpxe.png" alt=""/>*/}
          群聊
        </p>
      </div>

      {/*联系人*/}
      <div className='mail-wrap'>
        {userArr}
      </div>

      {/*a-z首字母*/}
      <div className="point-wrap">
        {pointArr}
      </div>

      <Tabbar />
    </div>
  );
}

const mapStateToProps = state => {
  return {
    userInfo: state.userInfo,
    roomInfo: state.roomInfo
  }
}

const mapDispatchToProps = dispatch => {
  return {
    setRoomInfo: roomInfo => dispatch(setRoomInfoAction(roomInfo))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Mail)